<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu>
        <el-submenu index="1">
          <template #title>
            <i class="el-icon-user" v-if="role == 'admin'"></i>
            <i class="el-icon-data-analysis" v-if="role == 'teacher'"></i>
            {{ menuList[0].title }}
          </template>
          <el-menu-item
            index="1-1"
            @click="selectMenu(menuList[0].children[0].path)"
          >
            {{ menuList[0].children[0].title }}
          </el-menu-item>
          <el-menu-item
            index="1-2"
            @click="selectMenu(menuList[0].children[1].path)"
          >
            {{ menuList[0].children[1].title }}
          </el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template #title>
            <i class="el-icon-menu" v-if="role == 'admin'"></i>
            <i class="el-icon-date" v-if="role == 'teacher'"></i>
            {{ menuList[1].title }}
          </template>
          <el-menu-item
            index="2-1"
            @click="selectMenu(menuList[1].children[0].path)"
          >
            {{ menuList[1].children[0].title }}
          </el-menu-item>
          <el-menu-item
            index="2-2"
            @click="selectMenu(menuList[1].children[1].path)"
          >
            {{ menuList[1].children[1].title }}
          </el-menu-item>
        </el-submenu>
        <el-submenu index="3" v-if="role == 'teacher'">
          <template #title>
            <i class="el-icon-setting"></i>
            {{ menuList[2].title }}
          </template>
          <el-menu-item
            index="3-1"
            @click="selectMenu(menuList[2].children[0].path)"
          >
            {{ menuList[2].children[0].title }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header
        style="
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          background-color: #4899e7;
        "
      >
        <div class="logo-containter">
          <img src="../../assets/logo2.png" alt="" class="logo" />
          实验室预约管理系统
        </div>
        <div style="width: 10%">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="main">主页</el-dropdown-item>
                <el-dropdown-item @click="center" v-if="role == 'teacher'">
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span style="color: white">{{ user.nickName }}</span>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { State } from "@/store";
import { useStore } from "vuex";
import { computed, defineComponent } from "vue";
import router from "@/router";
import { RouteRecordRaw } from "vue-router";

export default defineComponent({
  setup() {
    const store = useStore<State>();
    const menuList = computed(() => store.state.menuList);
    const role = computed(() => store.state.role);
    const user = computed(() => store.state.user);
    console.log(user.value);

    const selectMenu = (path: string) => {
      router.push(path);
    };
    const login_routes: Array<RouteRecordRaw> = [
      {
        name: "login",
        path: "/login",
        component: () => import("@/views/login/Login.vue"),
      },
      {
        name: "nomatch",
        path: "/:pathMatch(.*)*",
        redirect: { name: "login" },
      },
    ];
    const logout = () => {
      router.removeRoute("nomatch");
      router.removeRoute("main");
      login_routes.forEach((r) => router.addRoute(r));
      sessionStorage.removeItem("role");
      sessionStorage.removeItem("token");
      router.push("/login");
    };
    const main = () => {
      router.push("/main");
    };
    const center = () => {
      router.push("/center");
    };
    return {
      menuList,
      selectMenu,
      center,
      role,
      logout,
      user,
      main,
    };
  },
});
</script>
<style scoped>
router-link {
  font-style: none;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.logo-containter {
  width: 80%;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: white;
}
.logo {
  display: block;
  height: 58px;
  width: 450px;
}
</style>
